import { animation_obj } from '../../../Css/Classes/cla_animation_obj';
import {
  inject_remove_duration,
  inject_remove_timing_func,
} from '../../../DataDefine/sourceData';
import { Multiply_act } from '../../appear_dom/DataDefine/sourceData';
import { getElementViewOffsetPosi } from '../../getElementViewOffsetPosi';
import { inject_dom_dataMana } from '../../inject_dom/Classes/cla_inject_dom_dataMana';

const remove_dom_operateTag = 'remove_dom_operate';

/**
 * 移出 动画 元素 从当前位置 左移
 */
export class remove_dom_operate extends inject_dom_dataMana {
  get [Symbol.toStringTag]() {
    return remove_dom_operateTag;
  }

  constructor(elt: HTMLElement) {
    super(elt);
  }

  setstaticCss() {
    let cur_animation_obj = new animation_obj();

    cur_animation_obj.duration = inject_remove_duration;

    cur_animation_obj.timing_function = inject_remove_timing_func;

    let curEl_posi = getElementViewOffsetPosi(this.targetEl);
    // 最大 长度
    let maxWidth = curEl_posi.width;
    // 最大 高度
    let maxHeight = curEl_posi.height;

    cur_animation_obj.name = this.remove_dom_anima_cla;

    let Multiply_act_direct = Multiply_act[this.direct];

    let ret = `
      .${cur_animation_obj.name} {
            ${cur_animation_obj.toCssString()}

            box-sizing: border-box;
            /**overflow: hidden;*/

            animation-name: ${cur_animation_obj.keyframeName} , 
            ${cur_animation_obj.name}_mar_top_keyframe        ,
            ${cur_animation_obj.name}_opacity                 ,
            ${cur_animation_obj.name}_font_size               ,
            ${cur_animation_obj.keyframeName}_remove_dom;

        }

        @keyframes ${cur_animation_obj.keyframeName}{
            0%{
                width: ${maxWidth}px;
                height: ${maxHeight}px;
            }
            100%{
                width: ${Multiply_act_direct[0] * maxWidth}px;
                height: ${Multiply_act_direct[1] * maxHeight}px;
            }
        }
        
        @keyframes ${cur_animation_obj.name}_mar_top_keyframe {   
            100%{
                margin: 0;
                padding: 0;
            }
        }
          
        @keyframes ${cur_animation_obj.name}_opacity {   
            100%{
                opacity: 0;
            }
            40%{
                opacity: 0;
            }
        } 

        @keyframes ${cur_animation_obj.name}_font_size {   
            60%{
                font-size: 0px;
            }
            100%{
                font-size: 0px;
            }
        } 

        @keyframes ${cur_animation_obj.keyframeName}_remove_dom {
          100%{
            transform: translate(calc(${maxWidth}px + 30px));
          }

          40%{
            transform: translate(calc(${maxWidth}px + 30px));
          }
        }
          `;

    return ret;
  }
}
